<template>
<div class="login">
  <div class="login-con">
    <Card :bordered="true">
      <p slot="title"><Icon type="log-in"></Icon>欢迎登录</p>

      <div class="form-con">
        <Form ref="loginForm" :model="formModel" :rules="formRules">
          <FormItem prop="adminName">
            <Input v-model="formModel.adminName" placeholder="请输入管理员账号">
              <span slot="prepend"><Icon :size="16" type="person"></Icon></span>
            </Input>
          </FormItem>

          <FormItem prop="password">
            <Input v-model="formModel.password" type="password" placeholder="请输入管理员密码">
              <span slot="prepend"><Icon :size="14" type="locked"></Icon></span>
            </Input>
          </FormItem>

          <FormItem><Button type="primary" @click="handleSubmit">登录</Button></FormItem>
        </Form>
      </div>
    </Card>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      formModel: {
        adminName: '',
        password: ''
      },
      formRules: {
        adminName: [
          {required: true, message: '管理员账号不能为空!', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '管理员密码不能为空!', trigger: 'blur'}
        ]
      }  
    }
  },
  methods: {
    handleSubmit() {
      var _this = this;
      _this.$refs.loginForm.validate((valid) => {
        if(valid) {
					_this.$store.dispatch('user/login', _this.formModel).then(function(res) {
						if(res) {
							_this.$Message.success({
								content: res.message,
								onClose: function() {
									_this.$router.push({name: 'homeIndex'});
								}
							});
						}
					});
        }
      });
      return false;
    }
  }
}
</script>

<style>
.login-con {
  position: absolute;
  right: 150px;
  top: 20%;
  width: 300px;
}
 .login-con .form-con{
  padding: 10px 0 0;
}
</style>